<script setup lang="ts">
// import { ref } from "vue";

//数组
const str = 'zhongguo'
const person = [{id:1,name:'小明',age:18},{id:2,name:'小红',age:20}]
</script>
<template>
    <div id="app">
        <ul>
            <!-- 对象数组的循环 -->
            <li v-for="item in person" :key="item.id">
                姓名：{{ item.name }},年龄:{{ item.age }} </li>
        </ul>
        <ul>
            <!-- 字符串的循环输出 -->
            <li v-for="(item,index) in str" :key="index">{{ item }}
            </li>
        </ul>
        <ul>
            <!-- 数字数组的循环 -->
            <li v-for="item in 10" :key="item">{{ item }}</li>
        </ul>
        <ul>
            <!-- 遍历对象：
                value：对象中的值
                key：对象中的键
                index：遍历索引从0开始
            -->
            <li v-for="(value,key,index) in person[0]" :key="index">
                键: {{ key }}, 值:{{ value }}
            </li>
        </ul>
    </div>
  
</template>
<style>
  
</style>

